import React, {Fragment} from 'react';
import {Button, Form, Input, InputNumber, notification, Tag} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {ModalFooter} from 'antd-extra';
import {TwitterPicker} from 'react-color';
import {blue, cyan, geekblue, gold, green, lime, magenta, purple, red} from '@ant-design/colors';
import notify from '../../NotificationExtra';
import ComponentBase from '../../Base/ComponentBase';

const _theme = require('../../../theme');
const _ = require('lodash');
moment.locale('zh-cn');

@Form.create()
class ModalCreateNode extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {tagColor: undefined};
  }

  componentDidMount() {
    const {node} = this.props;
    if (node) {
      this.setState({code: node.treeId});
      return;
    }
    this.requestCode('TRE', code => {
      this.setState({code});
    });
  }

  checkData = values => {
    let num = 0;
    for (const key in values) {
      //  console.log('kkk', key, values[key]);
      if (!values[key]) {
        num++;
      }
    }

    if (num > 3) {
      notify({message: '类型和名称必须有一项不为空', type: 'error'});
      return false;
    }
    return true;
  };
  close = () => {
    const {result, form, modalRef} = this.props;
    // form.validateFields((err, values) => {
    //   if (err) {
    //     const {code} = err;
    //     const {errors} = code;
    //     errors.forEach(item => {
    //       console.log(item)
    //       notification.error(item);
    //     });
    //     return;
    //   }
    //
    // })
    const _values = form.getFieldsValue();
    if (!this.checkData(_values)) {
      return;
    }
    result(_values);
    modalRef.close();
  };
  selectColor = color => {
    const {hex} = color;
    this.setState({tagColor: hex});
  };

  render() {
    const {form: {getFieldDecorator}, node, codeEdited = false} = this.props;
    const name = node ? node.name : '';
    const mark = node ? node.mark : '';
    const label = node && node.title ? node.title.label : '';

    const color = node && node.title ? node.title.color : _theme['primary-color'];
    let _tagColor = this.state.tagColor ? this.state.tagColor : color;
    let code = this.state.code ? this.state.code : '';
    let sort = node && node.sort ? node.sort : 0;

    return (
      <Fragment>
        <Form>
          <Form.Item>
            {getFieldDecorator('treeId', {initialValue: code})(<Input
              style={{width: '45%', marginRight: '12px'}}
              addonBefore={'目录编码'}
              disabled={!codeEdited}
              required={true}></Input>)}
            {getFieldDecorator('sort', {initialValue: sort})(<InputNumber
              style={{width: '45%', marginRight: '12px'}}
              addonBefore={'排序'}
              required={true}
            ></InputNumber>)}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('type', {initialValue: label})(<Input
              style={{width: '45%', marginRight: '12px'}}
              addonBefore={'目录类型'}
              required={true}></Input>)}
            {getFieldDecorator('name', {initialValue: name})(<Input
              addonBefore={'目录名称'}
              style={{width: '45%'}}
              required={true}></Input>)}

          </Form.Item>
          <Form.Item>
            {getFieldDecorator('mark', {initialValue: mark})(<Input
              addonBefore={'标识'}
              style={{width: '45%'}}
            ></Input>)}
          </Form.Item>
          {getFieldDecorator('backColor', {initialValue: _tagColor})
          (<Tag style={{marginBottom: 20}} color={_tagColor}> 目录类型背景色:{_tagColor} </Tag>)}
          <TwitterPicker
            style={{marginLeft: 20}}
            width={410}
            color={_tagColor}
            colors={[
              ...blue, ...geekblue, ...purple, ...green, ...lime, ...cyan, ...red, ...magenta, ...gold, _theme['primary-color']
            ]}
            onChange={this.selectColor}
            onChangeComplete={this.selectColor}>
          </TwitterPicker>
        </Form>

        <ModalFooter>
          <Button
            type="primary"
            onClick={() => {
              this.close();
            }}
          >确认
          </Button>
          <Button onClick={() => {
            this.props.modalRef.close();
          }}
          >取消
          </Button>
        </ModalFooter>
      </Fragment>
    );
  }
}

export default ModalCreateNode;
